<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery事件绑定机制介绍</title>

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">
	$(function(){
		//js事件与jq区别
		//jq可绑定多个事件
		
		//这种方案是jquery提供的一种简化绑定事件操作
		//$("#btn").click(function(){
		//	alert("hello");
		//});
		//bind用于绑定事件
		//$("#btn").bind("click",function(){
		//	alert("hello");
		//});
		//unbind用于解除事件的绑定
		//$("#btn").unbind("click");
		
		//我们也可以使用live来进行事件绑定
		//$("#btn").live("click",function(){
		//	alert("hello world");
		//});
		
		//我们可以使用die方法来解决live的绑定操作
		//$("#btn").die("click");
		
		//live与bind的区别
		//bind只能为存在的元素进行事件的绑定，而live它可以为没有存在，后续通过代码新添加的元素绑定事件.
		$(":button").live("click",function(){
			alert("hello...");
		});
		
		//新添加一个按钮
		$("body").append($("<input type='button' value='新按钮'>"));
		
		
		// 一次性提交，避免重复提交 ，
		$("#btn2").one("click",function(){
			alert("hello");
		});
		
		//mouseover 鼠标悬停
		//给按钮注册一个mouseover事件
			$("#btn").bind("mouseover", function() {
	
				//事件触发
				$(this).trigger("click");
			});
			
		//1.先设置div隐藏
		$("div").hide();
		//2.给h1添加hover操作
		$("h1").hover(function(){
			//鼠标移入到h1上会执行
			//$("div").show(2000);
			//$("div").slideDown(2000);
			$("div").fadeIn(2000);
		},function(){
			//鼠标离开h1时会执行
			//$("div").hide(2000);
			//$("div").slideUp(2000);
			$("div").fadeOut(2000);
		});	
		
		// 点击
		$("img").toggle(function() {
			$(this).attr("src", "../img/2.png");
		}, function() {

			$(this).attr("src", "../img/3.png");
		}, function() {

			$(this).attr("src", "../img/1.png");
		});
		
	});
	
		//传统的javascript中绑定事件
	/* windown.onload=function(){
		document.getElementById("btn").onclick=function(){
			
		}
	}; */
	
</script>
</head>
<body>
	<input type="button" id="btn" value="按钮">
	<input type="button" id="bt2" value="按钮">
	<h1>jquery介绍</h1>
	<div>
		jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。<br>
		jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。<br>
		它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。<br>
		jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。<br>
		jQuery兼容各种主流浏览器，如IE6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。[1]<br>
	</div>
	
	<img src='../img/1.png' width="100" height="100">
</body>
</html>